<JS>アロー関数
公開日：2019.04.10
更新日：2020.11.04
関数を定義する時、いつも普通にfunction宣言をする。
なので、(a,b) => {}こういうアロー関数が出てくると少し困惑する。
のでメモです。
What's アロー関数式
ES2015から使えるようになった
関数式をシンプルに書ける
↑なので関数を値として扱う（関数リテラル）
MDN：アロー関数
関数宣言と関数式の違いは以下の記事でかいたよ。
code:arrow.js
//普通の関数式
let func1 = function(x){
console.log(x);
}
//アロー関数式
let func2 = (x) => {
console.log(x);
}
//一文だけなら{}は省略可能
//引数が一つなら()は省略可能（無いときは省略不可）
let func3 = x => console.log(x);
//実行
func1(1);
func2(2);
func3(3);
//出力
1
2
3
短く書けます。
普通の関数式とアロー関数の違い
thisの扱い
code:normal.js
let greeding = function(){
console.log(this.hello);
}
let obj = {
hello:"hi!",
func:greeding
}
//メソッド呼び出し
obj.func();
//hi!
普通の関数でthisが何を指すのかは実行したタイミングで決まる。
そしてその参照先はベースオブジェクトを指す。
ベースオブジェクトとは「メソッドを呼ぶ際に、そのメソッドのドット演算子またはブラケット演算子のひとつ左にあるオブジェクト」のことを言います。 ベースオブジェクトがない場合のthisはundefinedとなります。
上記の場合はobjがベースオブジェクトになります。
code:arrow.js
let greeding = () => console.log(this.hello);
let obj = {
hello:"hi!",
func:greeding
}
obj.func();
//undefined
アロー関数でのthisは定義したタイミングで決まる。
定義した時点での外側のスコープのthisを指す。
上記の例の場合はトップレベルに書かれたthisと同等。
今回は実行コンテキストScript。グローバルオブジェクトはwindow。
（moduleで実行した場合のグローバルオブジェクトはundefined）